<!DOCTYPE html>
<html>
<head>
<title>album list</title>
    <link href="css/font.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/bootstrap.css" rel='stylesheet' type='text/css' />
<!-- Custom Theme files -->
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<!-- Custom Theme files -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- Custom Theme files -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!--webfont-->

 <script type="text/javascript">
		jQuery(document).ready(function($) {
			$(".scroll").click(function(event){		
				event.preventDefault();
				$('html,body').animate({scrollTop:$(this.hash).offset().top},1200);
			});
		});
        function change(n){
            if(n==1){
                document.getElementById('l2').style.display="inline";
                document.getElementById('l1').style.display="none";

            }
            if(n==2){
                document.getElementById('l1').style.display="inline";
                document.getElementById('l2').style.display="none";
            }
        }
        var flag_BatchDel = false;
        var pic2Del=[];
        $(function(){
            $(".stopDel").hide();
            $(".finishDel").hide();
            $(".startDel").show();
            $(".coverpage").hide();
            $(".coverpageSelectMe").hover(function(){
                        if (flag_BatchDel)
                            $(this).children('.coverpage').show();
                    },
                    function(){
                        if(flag_BatchDel)
                            $(this).children('.coverpage').hide();
                    });
            Array.prototype.indexOf = function(val) {
                for (var i = 0; i < this.length; i++)
                {
                    if (this[i] == val) return i;
                }
                return -1;
            };
            Array.prototype.remove = function(val) {
                var index = this.indexOf(val);
                if (index > -1)
                {
                    this.splice(index, 1);
                }
            };
            $(".coverpage").click(

                    function(){
                        console.log($(this).parent().children('.thumbnail').children('img')[0].src.split('/').pop());
                        if($(this).parent().css('border') != '3px solid rgb(255, 86, 86)')
                        {
                            $(this).parent().css('border','3px solid rgb(255, 86, 86)');
                            pic2Del.push($(this).parent().children('.thumbnail').children('img')[0].src.split('/').pop());
                        }
                        else {
                            $(this).parent().css('border','none');
                            pic2Del.remove($(this).parent().children('.thumbnail').children('img')[0].src.split('/').pop());
                        }
                    }
            );
        });
        function  StartBatchDel()
        {
            flag_BatchDel = true;
            $(".stopDel").show();
            $(".finishDel").show();
            $(".startDel").hide();
        }
        function BATCHDELETE()
        {
            $(".stopDel").hide();
            $(".finishDel").hide();
            $(".startDel").show();
            flag_BatchDel = false;
            $(".blog-post").css('border','1px solid rgb(221,221,221)');
            alert(pic2Del);
            pic2Del=[];
        }
        function StopBatchDel()
        {
            $(".stopDel").hide();
            $(".finishDel").hide();
            $(".startDel").show();
            flag_BatchDel = false;
            $(".blog-post").css('border','1px solid rgb(221,221,221)');
            pic2Del = [];
        }
	</script>
    <style>
        h3
        {
            font-weight: 700;
        }
        h4.head
        {
            padding: 10px;;
        }
        .thumbnail {
            max-height:210px;
            min-height:200px;
            overflow:hidden;
            bottom:0;
            margin:0;
            padding: 0;
        }
    </style>
</head>
<body>
	<div class="navigation-strip">
        <div class="container">
            <div class="nav_content">
                <div class="home">
                    <a href="index.html"><img src="images/imangine.png" alt="" /></a>
                </div>
                <div class="search">
                    <form>
                        <input type="text" value="" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Search..';}"/>
                        <input type="submit" value="">
                    </form>
                </div>
                <div class="reglogbar-user pull-right">
                    <div class="userp">
                        <a href="personal.html"> <span>Jully Coco &nbsp;</span> </a>
                        <a href="personal.html"> <img src="images/user-p.png" /> </a>
                    </div>
                </div>
                <span class="menu"></span>
                <div class="top-menu">
                    <ul>
                        <li><a class="active" href="pic.html">Picture</a></li>
                        <li><a href="album.html">Album</a></li>
                        <li><a href="group.html">Group</a></li>
                        <li><a href="search.html">Search</a></li>
                        <li><a href="about.html">About us</a></li>
                        <div class="clearfix"></div>
                    </ul>
                </div>
                <!-- script for menu -->
                <script>
                    $( "span.menu" ).click(function() {
                        $( ".top-menu" ).slideToggle( "slow", function() {
                            // Animation complete.
                        });
                    });
                </script>
                <!-- script for menu -->
                <div class="clearfix"></div>
            </div>
        </div>
	</div>
	<div class="content">
		<div class="container">
			<div class="blog-posts-section">		
				<!-- head-section -->
					<!--<div class="head-section text-center">-->
						<!--<h2>Personal Page</h2>-->
						<!--<span>            </span>-->
					<!--</div>-->
					<!--<div class="picUpload"> <a href="picUpload.html">上传图片</a>-->
                        <!--<span>            </span>-->
                    <!--</div>-->
                <!-- /head-section -->
                <div class="col-md-3">
                    <div class="row">
                        <div class="col-md-11" id="userinfo">
                            <a href="single-group.html"><img id="albumprof" src="images/a1.jpg" /></a>
                            <br />
                            <br />
                            <!--<img class="likeit" id="l1" onclick="change(1)" style="display:inline;"  src="images/hollowheart.png"/>-->
                            <!--<img class="likeit" id="l2" onclick="change(2)" style="display:none;"  src="images/fullheart.png"/>-->
                            <!--<br />-->
                            <h3>Group Name</h3>
                            <p>Group description</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-9">
                    <h4 class="head"><a href="#">Group Album</a><span class="line"></span>

                    </h4>
                    <div class="blog-post-grids blog_grids">
                        <div class="col-md-4 blog-posts">
                            <div class="coverpageSelectMe blog-post">
                                <div class="coverpage"></div>
                                <a href="single.html" class="thumbnail"><img src="images/a1.jpg"></a>
                                <a href="single.html" class="blog-title">This is post title</a>
                                <p class="sub_head">Posted by <a href="#">Admin</a> on 12/04/2014</p>
                                <span></span>

                            </div>
                            <div class="coverpageSelectMe blog-post">
                                <div class="coverpage"></div>
                                <a href="single.html" class="thumbnail"><img src="images/a2.jpg"></a>
                                <a href="single.html" class="blog-title">This is post title</a>
                                <p class="sub_head">Posted by <a href="#">Admin</a> on 12/04/2014</p>
                                <span></span>

                            </div>
                            <div class="coverpageSelectMe blog-post">
                                <div class="coverpage"></div>
                                <a href="single.html" class="thumbnail"><img src="images/a5.jpg"></a>
                                <a href="single.html" class="blog-title">This is post title</a>
                                <p class="sub_head">Posted by <a href="#">Admin</a> on 12/04/2014</p>
                                <span></span>

                            </div>
                        </div>
                        <div class="col-md-4 blog-posts">
                            <div class="coverpageSelectMe blog-post">
                                <div class="coverpage"></div>
                                <a href="single.html" class="thumbnail"><img src="images/a3.jpg"></a>
                                <a href="single.html" class="blog-title">This is post title</a>
                                <p class="sub_head">Posted by <a href="#">Admin</a> on 12/04/2014</p>
                                <span></span>

                            </div>
                            <div class="coverpageSelectMe blog-post">
                                <div class="coverpage"></div>
                                <a href="single.html" class="thumbnail"><img src="images/a4.jpg"></a>
                                <a href="single.html" class="blog-title">This is post title</a>
                                <p class="sub_head">Posted by <a href="#">Admin</a> on 12/04/2014</p>
                                <span></span>

                            </div>
                            <div class="coverpageSelectMe blog-post">
                                <div class="coverpage"></div>
                                <a href="single.html" class="thumbnail"><img src="images/a6.jpg"></a>
                                <a href="single.html" class="blog-title">This is post title</a>
                                <p class="sub_head">Posted by <a href="#">Admin</a>on 12/04/2014</p>
                                <span></span>

                            </div>
                        </div>
                        <div class="col-md-4 blog-posts span_66">
                            <div class="coverpageSelectMe blog-post">
                                <div class="coverpage"></div>
                                <a href="single.html" class="thumbnail"><img src="images/a7.jpg"></a>
                                <a href="single.html" class="blog-title">This is post title</a>
                                <p class="sub_head">Posted by <a href="#">Admin</a> on 12/04/2014</p>
                                <span></span>

                            </div>
                            <div class="coverpageSelectMe blog-post">
                                <div class="coverpage"></div>
                                <a href="single.html" class="thumbnail"><img src="images/a8.jpg"></a>
                                <a href="single.html" class="blog-title">This is post title</a>
                                <p class="sub_head">Posted by <a href="#">Admin</a> on 12/04/2014</p>
                                <span></span>

                            </div>
                            <div class="coverpageSelectMe blog-post">
                                <div class="coverpage"></div>
                                <a href="single.html" class="thumbnail"><img src="images/a9.jpg"></a>
                                <a href="single.html" class="blog-title">This is post title</a>
                                <p class="sub_head">Posted by <a href="#">Admin</a> on 12/04/2014</p>
                                <span></span>

                            </div>
                        </div>
                        <div class="clearfix"></div>
                        <div class="pagination text-center">
                            <ul>
                                <li><a class="prev" href="#">Prev</a></li>
                                <li><a href="#">1</a></li>
                                <li><a href="#">2</a></li>
                                <li><a href="#">3</a></li>
                                <li><a href="#">4</a></li>
                                <li><a href="#">5</a></li>
                                <li><a href="#">6</a></li>
                                <li><a href="#">7</a></li>
                                <li><a href="#">8</a></li>
                                <li><span>.....</span></li>
                                <li><a href="#">12</a></li>
                                <li><a href="#" class="next">Next</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
			</div>
		</div>
	</div>
	<div class="footer">
		<div class="footer-top">
			<div class="container">
				<div class="col-md-4 footer-grid">
					<h5>ABOUT US</h5>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla in purus nibh. Donec ornare felis neque. Nullam tortor nulla, sodales quis posuere quis, tristique nec libero. Proin vitae convallis odio. Morbi nec enim nisi. Aliquam erat volutpat. </p>
				</div>
				<div class="col-md-4 footer-grid">
					
				</div>
				<div class="col-md-4 footer-grid">
					<h5>FOLLOW US</h5>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla in purus nibh. Donec ornare felis neque. Nullam tortor! </p>
					
				</div>
				<div class="clearfix"></div>
			</div>
		</div>
		<div class="footer-bottom">
			<div class="container">
				<div class="copyrights">
                    <p>Copyright &copy; 2015.Imangine All rights reserved.</p>
				</div>
				<div class="go-top">
					<a href="#header" class="scroll"><img src="images/go-to-top.png" alt="" /></a>
				</div>
				<div class="clearfix"></div>
			</div>
		</div>
	</div>
</body>
</html>